import React, { useState } from 'react';
import { Radio, Card, Carousel, Image } from 'antd';

// 版位
export default function layout(props: any) {
  const [check, setcheck] = useState<string | number>(1);

  return (
    <div className="f fja">
      <Card title="版位" bordered={false} style={{ width: 300 }}>
        <Radio.Group
          onChange={(e) => {
            setcheck(e.target.value);
          }}
          value={check}
        >
          <Radio value={1}>A</Radio>
          <Radio value={2}>B</Radio>
          <Radio value={3}>C</Radio>
          <Radio value={4}>D</Radio>
        </Radio.Group>
      </Card>
      <Carousel autoplay style={{width:"400px"}}>
        {[1, 2, 3, 4].map((item) => {
          return (
            <div style={{textAlign:"center"}}>
              <Image preview={false}  width={200} key={item} src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
            </div>
          );
        })}
      </Carousel>
    </div>
  );
}
